<template>
  <div class="UserConfig">
    <div class="top_serch">
      <el-form style="width: 60%;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;"
        :model="form" label-width="110px">
        <el-form-item label="指挥部级别：" prop="accountName">
          <el-input clearable v-model="form.accountName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="启用状态：" prop="level">
          <el-select clearable v-model="form.level" placeholder="请选择">
            <el-option v-for="item in leveOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="serchBtn_box">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="list_box">
      <LsdTable slot="yjrwlb" :paginationAtrrs="config.table.paginationAtrrs" @pageChange="handleSizeChange"
        :compRef="config.table.compRef" ref="yjrwlb" :columns="config.table.columns" :title="config.table.title"
        :actions="config.table.actions" :tableData="config.table.tableData" :tableAttr="config.table.tableAttr"
        :isShowPage="config.table.isShowPage" :isSelectFlag="config.table.isSelectFlag"
        :isSequenceFlag="config.table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="config.dialogConfig" @close="close(config.dialogConfig)">
      <LsdDialogTitle slot="dialog" :titleConfig="config.titleConfig" :activeNames="config.activeNames">
        <DialogForm slot="slot1" @change="change" ref="formTasking" :formConfig="config.formConfig" />
        <LsdTable slot="slot2" :autoHeight="config.table1.autoHeight" :multiple="config.table1.multiple"
          :paginationAtrrs="config.table1.paginationAtrrs" @pageChange="handleSizeChange" :compRef="config.table1.compRef"
          ref="role" :columns="config.table1.columns" :title="config.table1.title" :actions="config.table1.actions"
          :tableData="config.table1.tableData" :tableAttr="config.table1.tableAttr" :isShowPage="config.table1.isShowPage"
          :isSelectFlag="config.table1.isSelectFlag" :isSequenceFlag="config.table1.isSequenceFlag"
          @onActionClick="onActionClick" />
        <LsdTable slot="slot3" :autoHeight="config.table2.autoHeight" :multiple="config.table2.multiple"
          :paginationAtrrs="config.table2.paginationAtrrs" @pageChange="handleSizeChange" :compRef="config.table2.compRef"
          ref="role" :columns="config.table2.columns" :title="config.table2.title" :actions="config.table2.actions"
          :tableData="config.table2.tableData" :tableAttr="config.table2.tableAttr" :isShowPage="config.table2.isShowPage"
          :isSelectFlag="config.table2.isSelectFlag" :isSequenceFlag="config.table2.isSequenceFlag"
          @onActionClick="onActionClick" />
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import { listPage, templateAdd, getById, templateDetail } from "@/api/SystemConfig/headquartersConfig";
import { TestUserOption } from "@/api/EmergencyDisposal/yjzhb";
function checkHeight() {
  const height = `${window.innerHeight - (window.innerHeight * 0.458)}px`;
  return height;
}
export default {
  components: {},
  data() {
    return {
      config: {},
      form: {
        accountName: "",
        realName: "",
        jgjb: ""
      },
      leveOptions: [
        {
          value: "1",
          label: "启用"
        },
        {
          value: "2",
          label: "停用"
        }
      ],
      Userorg: JSON.parse(sessionStorage.getItem("org")), // 当前登录人单位级别
      accountId: "",
      zhbgwList: [],
      zhbgzfzList: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.config = require(`./config`).default.config(this);
    const { level } = this.Userorg;
    const item = this.config.formConfig.formData[1].radio;
    if (level === 1) {
      item.splice(2, 2);
    } else if (level === 2) {
      item.splice(0, 1);
      item.splice(2, 1);
    } else {
      item.splice(0, 1);
      item.splice(1, 1);
    }
  },
  mounted() {
    window.onresize = () => {
      checkHeight();
    };
    this.getlist();
    this.getNameList();
  },
  methods: {
    change(val, item) {
      this.getDicList(val);
    },
    // 获取列表
    getlist(val) {
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10
        };
      }
      listPage(params).then(res => {
        this.config.table.tableData = res.data;
        this.config.table.paginationAtrrs.total = res.total;
        this.config.table.paginationAtrrs.pageNum = params.pageNum;
        this.config.table.paginationAtrrs.pageSize = params.pageSize;
      });
    },
    // 获取模板详情
    async getDetail(id) {
      const res = await getById(id);
      if (res) {
        this.getDicList(res.headquartersLv || 0);
        const result = Object.assign([], res.groupUsers);
        result.forEach(i => {
          i.memberIds = (i.memberIds).split(",");
          i.members = (i.members).split(",");
        });
        this.$refs.formTasking.form = { ...res };
        this.config.table1.tableData = res.accountUsers;
        this.config.table2.tableData = result;
        console.log(this.config.table2.tableData, "--this.config.table2.tableData");
      }
    },
    // 查询
    query() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        ...this.form
      };
      this.getlist(params);
    },
    // 重置
    reset() {
      this.form = {};
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
      this.getlist();
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 指挥部模板新增
    add(type, id) {
      this.config.dialogConfig.isShow = true;
      if (type) {
        this.config.dialogConfig.type = type;
        this.getDetail(id);
      } else {
        this.config.dialogConfig.type = "add";
        this.$nextTick(() => {
          if (this.Userorg.level === 1) {
            this.$set(this.$refs.formTasking, "form", { headquartersLv: "0", headquartersLvName: "省级指挥部" });
          } else if (this.Userorg.level === 2) {
            this.$set(this.$refs.formTasking, "form", { headquartersLv: "2", headquartersLvName: "地市指挥部" });
          } else if (this.Userorg.level === 3) {
            this.$set(this.$refs.formTasking, "form", { headquartersLv: "3", headquartersLvName: "县级指挥部" });
          }
          this.config.table1.tableData = [
            {
              post: "",
              userName: "",
              contact: "",
              unitDept: "",
              duty: "",
              dept: "",
              responsibility: ""
            }
          ];
          this.config.table2.tableData = [
            {
              groupType: "",
              userId: "",
              dept: "",
              contact: "",
              unitDept: "",
              duty: "",
              members: "",
              responsibility: ""
            }
          ];
          this.getDicList(this.$refs.formTasking.form.headquartersLv);
        });
      }
    },
    // 模板删除
    delete(id) {
      this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        templateDetail({ id }).then(res => {
          if (res) {
            this.$message({
              message: "删除成功!",
              type: "success"
            });
            this.getlist();
          }
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      const params = {
        pageNum: val["current-page"],
        pageSize: val["page-size"]
      };
      this.getlist(params);
    },
    close(val) {
      val.isShow = false;
      this.$set(this.$refs.formTasking, "form", {});
    },
    // 保存
    async save() {
      const result = this.config.table2.tableData;
      result.forEach(i => {
        i.members = (i.members).join(",");
        i.memberIds = (i.memberIds).join(",");
      });
      const params = {
        ...this.$refs.formTasking.form,
        creator: JSON.parse(sessionStorage.getItem("account")).realName,
        creatorId: JSON.parse(sessionStorage.getItem("account")).id,
        modifier: JSON.parse(sessionStorage.getItem("account")).realName,
        modifierId: JSON.parse(sessionStorage.getItem("account")).id,
        accountUsers: this.config.table1.tableData,
        groupUsers: result
      };
      const res = await templateAdd(params);
      if (res) {
        this.config.dialogConfig.isShow = false;
        this.getlist();
        this.$message({
          message: "添加成功!",
          type: "success"
        });
      }

    },
    editAccount(scope) {
      this.config.dialogConfig.isShow = true;
      this.$nextTick(() => {
        this.$refs.formTasking.form = { ...scope.row };
      });
    },
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.add("edit", scope.row.id);
      } else if (item === "删除") {
        this.delete(scope.row.id);
      }
    },
    // 取消
    cancel() {
      this.config.dialogConfig.isShow = false;
    },
    // 获取姓名下拉;
    async getNameList() {
      const parmas = {
        pageNum: 1,
        pageSize: 10,
        orgId: JSON.parse(sessionStorage.getItem("org")).orgId
      };
      const res = await TestUserOption(parmas);
      if (res) {
        const option = res.map((item) => {
          return {
            label: item.userName,
            value: item.userId
          };
        });
        this.namelist = option;
      }
    },
    // 获取岗位、工作组名称dic接口
    async getDicList(lv) {
      // 根据指挥部级别判断接口参数
      const LvMap = {
        0: "sj",
        1: "xc",
        2: "ds",
        3: "xj"
      };
      const result = [`yj_${LvMap[lv]}_zhb_zhrygw`, `yj_${LvMap[lv]}_zhb_gzfz`];
      const resultList = ["zhbgwList", "zhbgzfzList"];
      const retuenName = {
        label: "dicName",
        value: "id",
        dicDesc: "dicDesc"
      };
      const { data } = await this.common.getDicCommon(result, resultList, retuenName);
      for (const [key, value] of Object.entries(data)) {
        this[key] = value;
      }
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.UserConfig {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;

  .top_serch {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

    :deep(.el-input__inner) {
      height: 32px;
      width: 320px !important;
      margin-bottom: 0;
    }

    :deep(.el-form-item__content) {
      width: 320px !important;
    }

    :deep(.el-form-item) {
      margin-bottom: 0;
    }

    .serchBtn_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .list_box {
    width: 100%;
    flex: 1;
  }

  :deep(.el-dialog) {
    height: 76% !important;
  }
}

.jgpz_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-input__inner) {
    height: 32px;
    margin-bottom: 0;
  }
}

:deep(.EmergencyList-dialog-form-item) {
  justify-content: center !important;
}

:deep(.el-form-item__content) {
  width: 100% !important;
}

:deep(.el-select--small) {
  width: 100% !important;
}

// :deep(.treeList) {
//   .treeSerch {
//     .el-input__inner {
//       width: 380px !important;
//       height: 32px;
//       margin-bottom: 0;
//     }
//   }
// }
</style>
